import React from 'react';
import { InputNumber, Row, Col, Typography, Space, Tooltip } from 'antd';
import { SyncOutlined, LockOutlined, UnlockOutlined } from '@ant-design/icons';

interface PaddingControlProps {
  padding: number | number[] | undefined;
  onChange: (padding: number | number[]) => void;
}

/**
 * 内边距高级控制组件
 * 提供四边独立控制和同步模式
 */
const PaddingControl: React.FC<PaddingControlProps> = ({ padding, onChange }) => {
  const [synced, setSynced] = React.useState(true);

  // 将不同类型的padding转换为数组
  const getPaddingArray = (): number[] => {
    if (Array.isArray(padding)) {
      return padding.length >= 4 ? padding.slice(0, 4) : [...padding, ...Array(4 - padding.length).fill(0)];
    } else if (typeof padding === 'number') {
      return [padding, padding, padding, padding];
    } else {
      return [5, 5, 5, 5]; // 默认值
    }
  };

  const paddingArray = getPaddingArray();

  // 处理单个方向内边距的变化
  const handleDirectionChange = (index: number, value: number | null) => {
    if (value === null) return;
    
    const newPadding = [...paddingArray];
    newPadding[index] = value;
    
    // 如果是同步模式，所有值同步变化
    if (synced) {
      onChange(value);
    } else {
      onChange(newPadding);
    }
  };

  // 同步/锁定状态切换
  const toggleSync = () => {
    if (!synced) {
      // 切换到同步模式时，使用第一个值统一
      onChange(paddingArray[0]);
    }
    setSynced(!synced);
  };

  return (
    <div>
      <div style={{ marginBottom: 8, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Typography.Text type="secondary" style={{ fontSize: 12 }}>
          内边距控制
        </Typography.Text>
        <Tooltip title={synced ? "各方向独立控制" : "同步所有方向"}>
          <div onClick={toggleSync} style={{ cursor: 'pointer' }}>
            {synced ? <LockOutlined /> : <UnlockOutlined />}
          </div>
        </Tooltip>
      </div>

      {synced ? (
        <InputNumber
          size="small"
          value={typeof padding === 'number' ? padding : paddingArray[0]}
          onChange={(value) => handleDirectionChange(0, value)}
          min={0}
          addonAfter="px"
          style={{ width: '100%' }}
        />
      ) : (
        <>
          <Row gutter={[8, 8]}>
            <Col span={12}>
              <Space direction="vertical" style={{ width: '100%' }}>
                <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                  上边距
                </Typography.Text>
                <InputNumber
                  size="small"
                  value={paddingArray[0]}
                  onChange={(value) => handleDirectionChange(0, value)}
                  min={0}
                  addonAfter="px"
                  style={{ width: '100%' }}
                />
              </Space>
            </Col>
            <Col span={12}>
              <Space direction="vertical" style={{ width: '100%' }}>
                <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                  右边距
                </Typography.Text>
                <InputNumber
                  size="small"
                  value={paddingArray[1]}
                  onChange={(value) => handleDirectionChange(1, value)}
                  min={0}
                  addonAfter="px"
                  style={{ width: '100%' }}
                />
              </Space>
            </Col>
            <Col span={12}>
              <Space direction="vertical" style={{ width: '100%' }}>
                <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                  下边距
                </Typography.Text>
                <InputNumber
                  size="small"
                  value={paddingArray[2]}
                  onChange={(value) => handleDirectionChange(2, value)}
                  min={0}
                  addonAfter="px"
                  style={{ width: '100%' }}
                />
              </Space>
            </Col>
            <Col span={12}>
              <Space direction="vertical" style={{ width: '100%' }}>
                <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                  左边距
                </Typography.Text>
                <InputNumber
                  size="small"
                  value={paddingArray[3]}
                  onChange={(value) => handleDirectionChange(3, value)}
                  min={0}
                  addonAfter="px"
                  style={{ width: '100%' }}
                />
              </Space>
            </Col>
          </Row>
        </>
      )}
    </div>
  );
};

export default PaddingControl;